<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
const route = useRoute()
const router = useRouter()
const num = ref(1)

const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? (innerWidth.value = false) : (innerWidth.value = true)
})
const handleResize = () => {
  window.innerWidth < 1000 ? (innerWidth.value = false) : (innerWidth.value = true)
}
watch(() => window.innerWidth, handleResize)

const handleChange = (value) => {
  console.log(value)
}
const toETCH=()=>{
  router.back();
}
const chengg=()=>{
  ElMessage({
    message: '加入购物车成功',
    type: 'success',
  })
}
</script>

<template>
  <div v-if="innerWidth" style="display: flex;">
    <div style="width:50%; margin-left:40px; margin-top:50px ;">
      <div @click="toETCH" style="cursor: pointer; margin-bottom:50px ;">X</div>
      <div style="font-weight: 700; font-size: 20px">OMMH｜光譜還原護髮膜</div>
        <div style="margin-top: 6px">
          <span style="text-decoration: line-through; font-weight: 700"
            >NT$780 </span
          ><span style="margin-left: 10px; color: red; font-weight: 700">NT$680</span>
        </div>
        <div style="margin-top: 6px; color: #999">
          OMMH / <span style="font-weight: 700; color: black">洗髮</span>
        </div>
        <div
          style="
            margin-top: 6px;
            color: #999;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          E10005127
        </div>
        <div style="margin-top: 20px; font-size: 14px">
          淨化配方不含矽靈，加入了具溫和效用的自然植物，協助清除多餘油脂而不刺激頭皮，平衡頭皮PH值，同時為秀髮帶來豐盈感和光澤。
        </div>
        <div
          style="
            font-weight: 700;
            font-size: 14px;
            margin-top: 40px;
            text-decoration: underline;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          查看更多
        </div>
    </div>
    <div style="margin-left:20px ; width:50%; margin-right:120px; margin-top:20px ;">
      <button style="position:absolute; right: 20px; width: 100px; height: 40px; border-radius:10px; background-color: #000; color:#fff;">購買</button>
      <div style="font-weight: 700; margin-top: 90px;">購買方式</div>
      <div style="display: flex; margin-top:20px ; padding-bottom:20px; border-bottom:1px solid #c3caca;">
        <div style="display: flex;justify-content: center; align-items: center; border-radius:10px; border:2px solid #000; width: 270px; height: 100px;">
          <div>
            <div style="font-weight: 700;">單次購買</div>
            <div style="font-size:12px;">成立訂單即開始配送。</div>
          </div>
          <div style="font-weight: 700;">
            NT$ 680
          </div>
        </div>
        <div style="margin-left:20px ; display: flex;justify-content: center; align-items: center; border-radius:10px; border:2px solid #000; width: 270px; height: 100px;">
          <div style="font-weight: 700; color:#7ed321; position:absolute; top: 155px; right: 275px; font-size:12px;">滿額免運</div>
          <div>
            <div style="font-weight: 700;">週期訂閱</div>
            <div style="font-size:12px;">每月自動成立訂單並開始配送。</div>
          </div>
          <div style="font-weight: 700; color:red;">
            NT$ 680
          </div>
        </div>
      </div>
      <!-- 规格 -->
      <div style="padding-bottom:20px; border-bottom:1px solid #d2d8d8; margin-top:20px ; display: flex; justify-content: space-between;">
        <div>
          <div style="font-weight: 700;">规格</div>
          <div style="margin-top:20px ; display:flex; justify-content: center; align-items: center; width: 120px; height: 50px; border-radius:5px; border:2px solid #000;">
            1人（300ml）
          </div>
        </div>
        <div style="color:#888;">E10005127</div>
      </div>
      <div>
        <div style="margin-top:20px;margin-bottom:20px ; font-weight: 700;">選擇數量</div>
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
        <button 
          @click="chengg"
          style="
            width: 80%;
            margin-top: 20px;
            border-radius: 10px;
            height: 35px;
            color: #fff;
            background-color: #000;
          ">加入購物車</button>
      </div>
      <div style="display: flex;margin-top:20px ;">
        <img src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg" alt="">
        <div style="font-weight: 700;font-size:14px;">TAG SKIN多用潔顏巾-加購優惠 </div>
      </div>
      <div style="display: flex;margin-top:0px ;">
        <img src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg" alt="">
        <div style="font-weight: 700; font-size:14px;">覺知淨化洗髮露瓶-滿件折現 </div>
      </div>
      <div style="margin-top: 10px; font-weight: 700; text-decoration: underline;">展開所有優惠 </div>
      <div style="margin-top:20px ; color:rgb(198, 194, 194);">＊ 活動優惠以購物車結帳計算為準。</div>
    </div>
  </div>
  <div v-else>
    <div style="width:100%; padding-left:10px;padding-right:10px; margin-top:10px ;">
      <div @click="toETCH" style="cursor: pointer; margin-bottom:50px ;">X</div>
      <button style="position:absolute; top:10px; right: 20px; width: 100px; height: 40px; border-radius:10px; background-color: #000; color:#fff;">購買</button>
      <div style="font-weight: 700; font-size: 20px">OMMH｜光譜還原護髮膜</div>
        <div style="margin-top: 6px">
          <span style="text-decoration: line-through; font-weight: 700"
            >NT$780 </span
          ><span style="margin-left: 10px; color: red; font-weight: 700">NT$680</span>
        </div>
        <div style="margin-top: 6px; color: #999">
          OMMH / <span style="font-weight: 700; color: black">洗髮</span>
        </div>
        <div
          style="
            margin-top: 6px;
            color: #999;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          E10005127
        </div>
        <div style="margin-top: 20px; font-size: 14px">
          淨化配方不含矽靈，加入了具溫和效用的自然植物，協助清除多餘油脂而不刺激頭皮，平衡頭皮PH值，同時為秀髮帶來豐盈感和光澤。
        </div>
        <div
          style="
            font-weight: 700;
            font-size: 14px;
            margin-top: 40px;
            text-decoration: underline;
            padding-bottom: 30px;
            border-bottom: 1px solid #d5d5d5;
          "
        >
          查看更多
        </div>
    </div>
    <div style="padding-left:10px ; padding-right:10px; width:100%; margin-top:-20px ;">
      <div style="font-weight: 700; margin-top: 90px;">購買方式</div>
      <div style=" margin-top:20px ; padding-bottom:20px; border-bottom:1px solid #c3caca;">
        <div style="display: flex;justify-content: center; align-items: center; border-radius:10px; border:2px solid #000; width: 270px; height: 100px;">
          <div>
            <div style="font-weight: 700;">單次購買</div>
            <div style="font-size:12px;">成立訂單即開始配送。</div>
          </div>
          <div style="font-weight: 700;">
            NT$ 680
          </div>
        </div>
        <div style="margin-top:20px ; display: flex;justify-content: center; align-items: center; border-radius:10px; border:2px solid #000; width: 270px; height: 100px;">
          <div style="font-weight: 700; color:#7ed321; position:absolute; top: 155px; right: 275px; font-size:12px;">滿額免運</div>
          <div>
            <div style="font-weight: 700;">週期訂閱</div>
            <div style="font-size:12px;">每月自動成立訂單並開始配送。</div>
          </div>
          <div style="font-weight: 700; color:red;">
            NT$ 680
          </div>
        </div>
      </div>
      <!-- 规格 -->
      <div style="padding-bottom:20px; border-bottom:1px solid #d2d8d8; margin-top:20px ; display: flex; justify-content: space-between;">
        <div>
          <div style="font-weight: 700;">规格</div>
          <div style="margin-top:20px ; display:flex; justify-content: center; align-items: center; width: 120px; height: 50px; border-radius:5px; border:2px solid #000;">
            1人（300ml）
          </div>
        </div>
        <div style="color:#888;">E10005127</div>
      </div>
      <div>
        <div style="margin-top:20px;margin-bottom:20px ; font-weight: 700;">選擇數量</div>
        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
        <button 
          @click="chengg"
          style="
            width: 80%;
            margin-top: 20px;
            border-radius: 10px;
            height: 35px;
            color: #fff;
            background-color: #000;
          ">加入購物車</button>
      </div>
      <div style="display: flex;margin-top:20px ;">
        <img src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg" alt="">
        <div style="font-weight: 700;font-size:14px;">TAG SKIN多用潔顏巾-加購優惠 </div>
      </div>
      <div style="display: flex;margin-top:0px ;">
        <img src="https://cdn.quickper.com/static/img/icons/order/orderPromotionFront.svg" alt="">
        <div style="font-weight: 700; font-size:14px;">覺知淨化洗髮露瓶-滿件折現 </div>
      </div>
      <div style="margin-top: 10px; font-weight: 700; text-decoration: underline;">展開所有優惠 </div>
      <div style="margin-top:20px ; color:rgb(198, 194, 194);">＊ 活動優惠以購物車結帳計算為準。</div>
    </div>
  </div>
</template>

<style scoped></style>